<template>
    <div class="main">
        <div class="title">
            NX TEA 后台管理系统
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="200px" class="demo-ruleForm">
            <h3 class="login-title"></h3>
            <el-form-item label="用户名" prop="account">
                <el-input type="text" v-model="ruleForm.account" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password
                    autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import http from "../util/api"
import router from '@/router'


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    password: '',
    checkPass: '',
    account: '',
})
// 创建一个变量来控制按钮是否能够点击
watch(ruleForm, (newval) => {
    console.log(newval)
})
onMounted(() => {
    console.log(process.env.VUE_APP_API);
})

// 密码
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}
// 确认密码
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== ruleForm.password) {
        callback(new Error("两次密码输入不一致"))
    } else {
        callback()
    }
}


// 表单验证规则
const rules = reactive<FormRules>({
    password: [
        { required: true, message: '密码不能为空！', trigger: 'blur' },
        { min: 6, max: 12, message: '请输入6~12位密码！', trigger: 'blur' },
    ],
    checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }],
    account: [
        { required: true, message: '用户名不能为空！', trigger: 'blur' },
        { min: 4, max: 8, message: '请输入4~8位用户名', trigger: 'blur' },
    ],
})
// 重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

// 表单提交
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            http('/people', 'get').then((res) => {
                console.log(res);
                console.log(ruleFormRef.value);
                let { data } = res
                if (ruleForm.account === data[0].account && ruleForm.password === data[0].password) {
                    ElMessage({
                        message: '登陆成功！',
                        type: 'success',
                    })
                    resetForm(ruleFormRef.value)

                    let obj = {
                        id: data[0].id,
                        account: data[0].account,
                        password: data[0].password
                    }
                    localStorage.setItem('user', JSON.stringify(obj))
                    router.push('/dity')
                } else {
                    ElMessage({
                        message: '用户名或密码错误！',
                        type: 'error',
                    })
                }
            })
        }
    })



}



</script>
<style lang="scss" scoped>
.main {
    height: 100vh; //100%的窗口高度
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../assets/images/01\ background.png') no-repeat;
    background-size: 100% 100%;
    position: relative;

    .title {
        position: absolute;
        translate: 10% -360%;
        font-size: 60px;
        font-weight: bold;
        color: white;
        font-family: Courier New;
    }

    .el-form {
        margin-right: -100px;
    }

    .login-title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .login-box {
        width: 400px;
        margin: 120px auto;
        border: 1px solid #dcdfe6;
        padding: 30px 55px 10px 20px;
        border-radius: 5px;
        box-shadow: 0 0 30px #dcdfe6;

        .el-button--info {
            margin-left: 60px;
        }
    }

    :deep .el-form-item__label {
        color: white;
        font-weight: bold;
        font-size: 18px;
    }

    a {
        position: absolute;
        right: 2px;
        text-decoration: underline;
        color: #409eff;
        cursor: pointer;
    }
}
</style>